<!--
 * @Author: your name
 * @Date: 2020-07-09 15:41:22
 * @LastEditTime: 2020-08-25 12:13:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \antd-vue-pro\src\views\d3Demo\normal.vue
--> 
<template>
<div>
    <div>d3Demo page</div>
    <h1>{{title}}</h1>
    <svg class="svg" id="d3Demo" width="500" height="400">
        <g style="transform: translate(0, 10px)">
            <path class="path" :d="line" />
        </g>
    </svg>
    <svg id="d3Demo2" width="800" height="400" />

    <svg id="d3Demo3" width="800" height="400" />
</div>
</template>

<script>
// import * as d3 from 'd3';
import {
    dataset
} from './dataset'
export default {
    data() {
        return {
            title: 'test',
            data: [99, 71, 78, 25, 36, 92],
            datalist: [{
                    name: 'haoleday',
                    value: 10
                },
                {
                    name: 'haoleday2',
                    value: 8
                },
                {
                    name: 'haoleday3',
                    value: 16
                },
                {
                    name: 'haoleday4',
                    value: 3
                },
                {
                    name: 'haoleday5',
                    value: 30
                },
                {
                    name: 'haoleday6',
                    value: 6
                }
            ],
            datalist2: [{
                    name: 'haoleday',
                    value: 18
                },
                {
                    name: 'haoleday2',
                    value: 13
                },
                {
                    name: 'haoleday3',
                    value: 16
                },
                {
                    name: 'haoleday4',
                    value: 13
                },
                {
                    name: 'haoleday5',
                    value: 30
                },
                {
                    name: 'haoleday6',
                    value: 12
                }
            ],
            line: ''
        }
    },
    mounted() {
        //   console.log(d3);
        this.calculatePath()
        this.initDemo2()
        this.demo3Init()
    },
    methods: {
        getScales() {
            const x = d3.scaleTime().range([0, 430])
            const y = d3.scaleLinear().range([400, 0])
            d3.axisLeft().scale(x)
            d3.axisBottom().scale(y)
            x.domain(d3.extent(this.data, (d, i) => i))
            y.domain([0, d3.max(this.data, d => d)])
            return {
                x,
                y
            }
        },
        calculatePath() {
            const scale = this.getScales()
            const path = d3
                .line()
                .x((d, i) => scale.x(i))
                .y(d => scale.y(d))
            this.line = path(this.data)
        },

        //  -----------柱状图--d3Demo2----------------
        initDemo2() {
            const margin = {
                left: 120,
                bottom: 50
            }
            const svg = d3.select('#d3Demo2')
            const innerHeight = +svg.attr('height') - margin.left
            const innerWidth = +svg.attr('width') - margin.bottom
            svg
                .append('g')
                .attr('class', 'd3Demo2-main')
                .attr('width', innerWidth)
                .attr('height', innerHeight)
                .attr('transform', `translate(${margin.left},${margin.bottom})`)
            const g = d3.selectAll('.d3Demo2-main')

            const xScale = d3
                .scaleLinear()
                .domain([0, d3.max(this.datalist, item => item.value)])
                .range([0, innerWidth])
            const yScale = d3
                .scaleBand()
                .domain(this.datalist.map(item => item.name))
                .range([0, innerHeight])
                .padding(0.1)

            const yAxis = d3.axisLeft(yScale)
            g.append('g').call(yAxis)

            const xAxis = d3.axisBottom(xScale)
            g.append('g')
                .call(xAxis)
                .attr('transform', `translate(0,${innerHeight})`)

            this.datalist.forEach(item => {
                g.append('rect')
                    .attr('width', xScale(item.value))
                    .attr('height', yScale.bandwidth())
                    .attr('fill', 'green')
                    .attr('y', yScale(item.name))
            })
            clearInterval(updateId)
            let dataIsNumer = true
            let updateId = setInterval(() => {
                // d3.selectAll('rect').data(this.datalist2).transition().duration(1000).attr('width',d=>xScale(d.value));
                let data = dataIsNumer ? this.datalist : this.datalist2
                d3.selectAll('rect')
                    .data(data)
                    .join('rect')
                    .transition()
                    .duration(1000)
                    .attr('width', d => xScale(d.value))
                dataIsNumer = !dataIsNumer
            }, 5000)
        },

        // 散点图
        demo3Init() {
            const margin = {
                left: 120,
                bottom: 50
            }
            const svg = d3.select('#d3Demo3')
            const innerWidth = +svg.attr('width') - margin.left
            const innerHeight = +svg.attr('height') - margin.bottom

            const g = svg
                .append('g')
                .attr('class', 'mainGroup')
                .attr('width', innerWidth)
                .attr('height', innerHeight)
                .attr('transform', `translate(${margin.left},0)`)

            const xScale = d3
                .scaleLinear()
                .domain(d3.extent(dataset, d => d[0]))
                .range([0, innerWidth])

            const yScale = d3
                .scaleLinear()
                .domain(d3.extent(dataset, d => d[1]).reverse())
                .range([0, innerHeight])

            const yAxis = d3.axisLeft(yScale)
            const xAxis = d3.axisBottom(xScale)

            g.append('g').call(yAxis)
            g.append('g')
                .call(xAxis)
                .attr('transform', `translate(0,${innerHeight})`)

            const updateSeq = seq => {
                const updatesSeq = g.selectAll('circle').data(seq)
                const enterSeq = updatesSeq
                    .enter()
                    .append('circle')
                    .attr(
                        'cx',
                        xScale(d => d[0])
                    )
                    .attr(
                        'cy',
                        yScale(d => d[1])
                    )
                    .attr('r', 5)
                    .attr('fill', 'blue')
                    .attr('fill-opacity', 0.5)

                updatesSeq
                    .merge(enterSeq)
                    .transition()
                    .duration(1000)
            }

            g.selectAll('.circle')
                .data(dataset)
                .enter()
                .append('circle')
                .attr('class', 'circle')
                .attr('cx', d => xScale(d[0]))
                .attr('cy', d => yScale(d[1]))
                .attr('r', 5)
                .attr('fill', 'green')
                .attr('fill-opacity', 0.5)
        },

        // 折线图

    }
}
</script>

<style lang="less" scoped>
.svg {
    margin: 25px;
}

.path {
    fill: none;
    stroke: #76bf8a;
    stroke-width: 3px;
}
</style>
